import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { sendLoginWindow } from "@/renderer/native-bridge";
import iconClose from "@/assets/image/icon_close.png"
import iconMin from "@/assets/image/icon_minimize.png"
import iconBack from "@/assets/image/icon_back.png"
import iconLogo from "@/assets/image/icon_logo.png"
import styles from "./register.module.css"
import { Input, message, Button } from "antd";
import httpClient from "@/renderer/data/remote/wan-android-api";
import { constUrl } from "@/common/constants";

export default function Register() {
    const [account, setAccount] = useState("")
    const [password, setPassword] = useState("")
    const [rePassword, setRePassword] = useState("")

    return (
        <div className={styles.page}>
            <RegisterToolBar></RegisterToolBar>
            <img className={styles.imgLogo} src={iconLogo}></img>

            <Input className={styles.input} size='large' placeholder='账号' onChange={(e) => {
                setAccount(e.target.value)
            }} />
            <div style={{ height: 20 }}></div>
            <Input.Password className={styles.input} size='large' placeholder='密码' onChange={(e) => {
                setPassword(e.target.value)
            }} />
            <div style={{ height: 20 }}></div>
            <Input.Password className={styles.input} size='large' placeholder='重复密码' onChange={(e) => {
                setRePassword(e.target.value)
            }} />
            <RegisterButton account={account} password={password} rePassword={rePassword} />

        </div>
    )
}



interface PropsRegisterButton {
    account: string,
    password: string
    rePassword: string
}

/**
 * 注册按钮
 */
function RegisterButton({ account, password, rePassword }: PropsRegisterButton) {
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate()

    async function requestLogin(account: string, password: string, rePassword: string) {
        if (account.length === 0) {
            messageApi.warning("请输入账号")
        } else if (password.length === 0) {
            messageApi.warning("请输入密码")
        } else if (rePassword.length === 0) {
            messageApi.warning("请再次输入密码")
        } else if (rePassword !== password) {
            messageApi.warning("两次密码输入不一致")
        } else {
            messageApi.loading("加载中，请稍后")
            try {
                await httpClient.postForm(constUrl.userRegister, {
                    "username": account,
                    "password": password,
                    "repassword": password,
                })
                messageApi.destroy()
                messageApi.error("注册成功")
                navigate(-1)
            } catch (error) {
                messageApi.destroy()
                messageApi.error(error.msg)
                console.log("注册异常：", error)
            }
        }
    }

    const handleLoginClick = () => {
        requestLogin(account, password, rePassword)
    }

    return (
        <div className={styles.btnRegister}>
            {contextHolder}
            <Button size='large'
                block
                type='primary'
                onClick={handleLoginClick}>注册</Button>
        </div>
    )
}


/**
 * 顶部工具栏
 */
function RegisterToolBar() {
    const navigate = useNavigate()
    return (
        <div className={styles.toolbar}>
            <img title="返回" className={styles.iconTool} src={iconBack} onClick={() => {
                navigate(-1)
            }}></img>
            <div>
                <img title='最小化' className={`${styles.iconTool}`} src={iconMin} onClick={(e) => {
                    sendLoginWindow("minimize")
                }}></img>
                <img title='关闭' className={`${styles.iconTool}`} src={iconClose} onClick={() => {
                    sendLoginWindow("close")
                }}></img>
            </div>
        </div>
    )

}